<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_原点变换</title>
  <style>
    .outer{
      width: 200px;
      height: 200px;
      margin: 0 auto;
      border: 1px solid black;
      margin-top: 100px;

    }
    .inner{
      width: 200px;
      height: 200px;
      background-color: skyblue;
      /* 通过关键字移动原点 */
      /* transform-origin: left top; */
      /* 通过像素移动原点 */
      transform-origin: 50px 50px;
      /* 通过百分比移动原点 */
      transform-origin: 25% 25%;
      /* left以左边中点进行旋转 */
      transform-origin: left;

      /* 变换原点对旋转操作有影响 */
      /* transform: rotate(30deg); */
      /* 变换原点对缩放有影响 */
      transform: scale(0.8);
      /* 变换原点对位移操作无影响 */
      /* transform: translate(100px,100px); */
    }
  </style>
</head>
<body>

  <div class="outer">
    <div class="inner">缩放</div>
  </div>
</body>
</html>